HTML - Elementos HTML 5 - Classe 5-ELEMENTOS DE TEXTO EM LINHA
Como ficou definido no documento 2, os elementos html podem ser divididos nas seguintes classes :
Classes dos elementos HTML:
1-ELEMENTOS BÁSICOS: <body>
2-ELEMENTOS DE METADADOS: <base><head><link><meta><style>
3-ELEMENTOS DE SEÇÕES DE CONTEÚDO: <address><article><aside> <footer>
<header><h1> a <h6><hgroup><nav>
4-ELEMENTOS DE CONTEÚDOS EM TEXTO: <dd><dl><dt><div><figure>
<figcaption><hr><li><main><ol><p><pre><ul>
5-ELEMENTOS DE TEXTO EM LINHA: <a><abbr><b><br><cite><code>
<data><dfn><em><i><kbd><mark><q><s><samp>
<small><span><strong><sub><sup><time><u><var>
6-ELEMENTOS DE IMAGEM E MULTIMÍDIA: <img><area><audio><map><track><video>
7-ELEMENTOS DE CONTEÚDOS EMBARCADOS :<embed><object><param><source>
8-ELEMENTOS DE SCRIPT: <canvas><noscript><script>
9-ELEMENTOS DE MARCAÇÃO DE EDIÇÃO: <del> <ins>
10-ELEMENTOS DE CONTEÚDOS EM TABELA: <caption><col><colgroup><table>
<tbody><td><tfoot><th><thead><tr>
11-ELEMENTOS DE FORMULÁRIO: <button><datalist><fieldset><form><input>
<label><legend><meter><optgroup><option><output><progress>
<select><textarea>
12-ELEMENTOS INTERATIVOS: <details><menu><menuitem><summary>
Neste documento discutiremos a classe 5 - 5-ELEMENTOS DE TEXTO EM LINHA.
Note bem que em 4-ELEMENTOS DE CONTEÚDOS EM TEXTO temos tags de texto que são exibidas em blocos e
em 5-ELEMENTOS DE TEXTO EM LINHA temos tags de texto que são exibidas em linha.
Neste documento discutiremos a classe 5 - ELEMENTOS DE TEXTO EM LINHA
01-<a>
Esta tag é uma das mais importantes da linguagem HTML. Com um simples clique do mouse você vai de um
documento para outro através desta tag. Chamamos isso de navegar entre as páginas e isto é
feito com extrema facilidade, simplicidade e velocidade.
Com isto podemos incorporar documentos/sites explicativos ao assunto abordado encaminhando o usuário
diretamente ao seu destino com um só clique do mouse enriquecendo sua interação com o conteúdo do site e
com isto evitando que ele precise procurar por mais detalhes, tudo está ao alcance do clique do
mouse.
O destino do link pode ser um ponto dentro do documento corrente ( link interno a página ). Com
isto ao clicar no link o conteúdo da página será apenas deslocado para exibir o conteúdo de destino.
O link também pode apontar para um outro do documento ou, melhor ainda, para ponto específico em outro
documento ( link externo a página mas no mesmo servidor ) externo a página corrente. Com isto o browser
irá abrir a página de destino e podemos escolher como este 'novo conteúdo' será exibido. Se o parâmetro
target possuir o valor self (target="self") o conteúdo de destino será exibido
na página corrente, apenas seu conteúdo será alterado. Se o parâmetro for blank
(target="blank") o conteúdo da página atual será preservado e uma nova página
do browser será exibida sobre ela ( sobrepondo ela ). Portanto teremos agora duas páginas do browser aberta.
O destino dos links podem ser locais e para isto utilizamos o parâmetro name da tag para indicar o destino de
um link local(href="destino").
Se o link for em outra página mas no mesmo site utilizamos o parâmetro id para indicar o destino
(href="#destino").
Se o link for em outra página em outro site utilizamos a url de destino completa da página de destino
(href="www.google.com").
Existe uma tag com este nome, Link o que traz muita confusão.
A tag link só é usada no header para incorporar ao código da página recursos de outras páginas como
folhas de estilo, bootstrap, javascript.
A tag anchor ( que muitos chamam de link) faz a ligação do documento com outro ponto de interesse de maneira que
com um clique você vá direto até ele.
Importante : Os recursos de navegação (URL) estão intrinsicamente ligados aos recursos de infra-estrutura de
rede. Para mais detalhes leia Funcionamento Internet.
O parâmetro target da tag define como a página de destino deverá ser aberta. Podemos exibir a página
destino onde no momento está sendo exibido o link ou podemos abrir uma página nova mantendo a página
com link 'em baixo' da página destino. Para mais informações sobre como abrir a página de destino
Clique aqui
Dentro do html5 foi incluido um parâmetro muito importante na tag achor que é o parâmetro download. Utilizando
este parametro da seguinte maneira : download="arquivo" ao clicar no link ao invés de abrir uma nova página
será feito o download do arquivo.
01.1-<a> - Link interno a mesma página
Muitas vezes estamos lendo um documento e ele faz referência a um anexo no final do documento.
Se este anexo é sem importância para o usuário ele passará batido pelo link. Mas se o anexo é de vital
importância para o usuário ele vai querer parar de ler o que esta lendo e ir para o anexo. É para isso
que existe o link, um clique e você tá lá.
Exemplo de link para a própria página :
O href do link aponta para o name de uma tag qualquer dentro da página.
Link : <a href="#linkInterno"> Teste de Link Interno</a>
Destino link: <a name="linkInterno">Este é o destino do linkInterno</a>
Testando o funcionamento do Link interno ( eu coloquei ele bem longe ):
Teste de Link interno
01.2-<a> - Link externo a página mas dentro do servidor
Este é o modelo mais clássico de uso desta tag. Estamos numa página e queremos navegar para outra
página dentro do nosso site.
Exemplo de link para uma página externa mas no mesmo servidor :
<a href="00-Sites de Referencia.html"> Teste de Link externo no mesmo servidor-Navegação para a página 00-Sites de Referencia.html</a>
Outra possibilidade do link externo é apontar diretamente para um ponto na página de destino.
Para isto basta agregar a url de destino o caractere # e o identificador do ponto.
No documento de destino basta colocar no ponto de destino, dentro da tag id='#destino'
Exemplo de link para uma página externa mas no mesmo servidor para um ponto específico da página :
<a href="20-ElementosHTML10-Classe 11 - Formulario.html#meter">20-ElementosHTML10-Classe 11 - Formulario.html - Item meter</a>
No documento de destino: <h3 name="meter" id="meter"><meter></h3>
01.3-<a> - Link externo a página e fora do nosso servidor
Este link é exatamente igual ao link para documento externo no mesmo site com a diferença que
será chamado um servidor externo que fará o uso do servidor DNS do micro que esta rodando
o browser. Estamos numa página e queremos navegar para outra página fora do nosso site.
Exemplo de link para uma página externa fora do nosso servidor :
<a href="https://www.google.com"> Teste de Link externo fora de nosso-Navegação para a google.com</a>
O Elemento HTML <abbr> representa uma abreviação e opcionalmente
fornece uma descrição completa para ela quando o mouse passa sobre a sigla.
Alguns navegadores, como o Internet Explorer, não aplicam nenhum estilo à mais do que é aplicado ao elemento
mas outros browsers como Opera, Firefox adicionam um sublinhado pontilhado ao conteúdo do elemento.
Alguns poucos navegadores não apenas adicionam um sublinhado pontilhado, mas também colocam o texto em
versalete (small caps)
Evite este tipo de estilo porque tudo que é estilo deve estar na CSS, adicione algo como
font-variant: none no CSS que administra este caso.
Exemplo de utilização:
Trump é presidente dos <abbr title="Estados Unidos da América">EUA</abbr>
Como o browser exibe :
Trump é presidente dos EUA
No Chrome ao passar o mouse sobre EUA ele vira uma interrogação e exibe a descrição ( como uma dica ou tooltip )
'Estados Unidos da América'.
03-<b>
É uma das tags mais antigas dos browsers e faz com que o texto que esteja envolvido por esta tag ficar em
negrito. B = Bold em ingles Negrito ( ou careca, ousado ).
Exemplo de utilização:
Este texto esta fora <b>Mas este texto esta dentro do negrito </b> e este esta fora também.
Como o browser exibe :
Este texto esta fora Mas este texto esta dentro do negrito e este esta fora também.
04-<br>
Você já deve ter notado que a mudança de linha no texto no HTML não quebra a linha, simplesmente não tem
significado. Para sair da linha corrente e ir para o início da linha seguinte temos a tag p ou a br.
A tag br designa uma quebra de linha, seja onde for, em um texto, entre texto e texto, entre imagens, texto e imagens.
É irmão da tag p com a diferença que a tag p é exibida em bloco ( ela pula linha antes e depois dela) e br é exibida
saindo da linha corrente e indo para uma nova linha logo abaixo sem deixar espaçamento .
Exemplo de utilização:
Este esta antes da tag br <br /> mas este texto esta depois da tag br.
Como o browser exibe :
Este esta antes da tag br mas este texto esta depois da tag br.
05-<cite>
É uma abreviação para citação. O elemento HTML <cite> representa uma referência a um trabalho artístico.
Deve incluir o título do trabalho ou uma URL de referência, que pode ser em uma forma abreviada de acordo
com as convenções usadas para a adição dos metadados de citação.
No Chrome ele exibe o texto em itálico.
Exemplo de utilização:
Mais infirmações podem ser encontrada em <cite>[ISO-0000]</cite>.
Como o browser exibe :
Mais infirmações podem ser encontrada em [ISO-0000].
Use o atributo cite em um elemento <blockquote> ou <q> para referenciar um recurso online para
uma origem.
06-<code>
Tag para formatação de texto - Indica que as informações contidas dentro da tag são
códigos de computador.
Dica: Essa tag não foi descontinuada, mas é possível obter um efeito mais rico com CSS.
Se quiser ver um resumo das tags que destacam texto Clique aqui
Exemplo de utilização:
<code>Uma parte do código do programa</code>
Como o browser exibe : Uma parte do código do programa
No Chrome o texto foi exibido em rosa.
07-<data>
Um dos maiores desejos dos programadores é conseguir salvar dados dentro de uma tag html sem que
esses dados sejam exibidos e que possam ser utilizados em processos dentro da página (via javascript)
ou mesmo sendo enviados de volta ao servidor para serem processados (via método post ou no submit
da página). E é exatamente o que esta tag faz. E isto pode ser feito em qualquer tag html.
Portanto data é um parâmetro que pode ser incorporado a uma tag html para armazenar informações.
Os atributos data-* são usados para armazenar dados personalizados privados na página ou no aplicativo.
Os atributos data-* nos permitem incorporar atributos de dados personalizados em todos os elementos HTML.
Os dados armazenados (personalizados) podem ser usados no JavaScript da página para criar uma experiência
de usuário mais atraente (sem chamadas do Ajax ou consultas ao banco de dados do lado do servidor).
O parâmetro data tem os seguintes atributos ou divisões:
O primeiro atributo é o nome do atributo não deve conter letras maiúsculas e deve ter pelo menos um caractere depois do prefixo
"data-"
Portanto "data-jose" é a declaração do dado jose dentro da tag html.
O segundo atributo é o valor do atributo em sí e pode ser qualquer sequência de caracteres, números, etc.
Nota: Os atributos personalizados prefixados com "dados-" serão completamente ignorados pelo browser, ou seja,
não são interpretados pelo browser não importando seu conteúdo.
Exemplo de utilização:
<p data-nome="valorx">Este é um parágrafo com valor associado</p>
Como o browser exibe :
Este é um parágrafo com valor associado
O browser exibe o parágrafo normalmente como se não tivesse o parâmetro data.
08-<dfn>
O elemento dfn é uma definição de um termo.
Exemplo de utilização:
<p>
<dfn id="def-internet">A Internet</dfn> é um sistema global de redes interconectadas que usam o
Internet Protocol Suite (TCP/IP) para servir bilhões de usuários no mundo todo.
</p>
Como o browser exibe :
A Internet é um sistema global de redes interconectadas que usam o
Internet Protocol Suite (TCP/IP) para servir bilhões de usuários no mundo todo.
09-<em>
Tag para formatação de texto - O elemento em significa enfase em Ingles.
É utilizado para destacar um texto dos demais
É exibido normalmente como itálico mas não deve ser usado para este propósito porque
o destaque é muito pequeno praticamente imperceptível ao usuário. Mas serve para
destacar o texto de um texto normal.
Se quiser ver um resumo das tags que destacam texto Clique aqui
Exemplo de utilização:
Este texto esta antes da tag em <em> mas este esta dentro</em> e este outro esta fora.
Como o browser exibe :
Este texto esta antes da tag em mas este esta dentro e este outro esta fora.
Como já disse neste documento, itálico é a enfase mais sutil que se pode dar a um texto e nem sempre
é notada pelo usuário.
10-<i>
É uma das tags mais antigas dos browsers e faz com que o texto que esteja envolvido por esta tag ficar em
itálico.
Exemplo de utilização:
Este texto esta fora <i>Mas este texto esta dentro do itálico </i> e este esta fora também.
Como o browser exibe :
Este texto esta fora Mas este texto esta dentro do itálico e este esta fora também.
Note que o efeito itálico da o menor destaque possível a um texto, quase imperceptível.
11-<kbd>
Esta tag define que o texto deve ser exibido como se fosse uma entrada do teclado.
Com o bootstrap o texto é exibido realmente como se fosse uma tecla do teclado
Exemplo de utilização:
<kbd>Entrada de teclado</kbd>
<kbd>A</kbd>
<kbd>S</kbd>
<kbd>D</kbd>
Como o browser exibe : Entrada de tecladoASD
Resumo das tags para dar enfase ao texto
São as tags <em>, <strong>, <code>, <samp>, <kbd>, <var>.
Sugiro usar a CSS ao invés destas tags. Elas foram muito usadas no passado mas toda formatação
no html5 foi passada para a CSS e pode ser que no html6 essas tags sejam inativadas.
Tag
Renderização
<em>
Renderiza como texto enfatizado.
Texto antes da tag Texto dentro da tag Texto Depois da tag.
No Chrome texto dentro da tag <em> é exibido em itálico.
<strong>
Tag para formatação de texto - Define texto importante, destacado, negritado.
Texto antes da tag Texto dentro da tag Texto Depois da tag.
No Chrome o texto dentro da tag <strong> é exibido em negrito.
<code>
Define um texto formatado como se fosse código do computador - Monoespaçado.
Texto antes da tag Texto dentro da tag Texto Depois da tag.
No Chrome o texto dentro da tag <code> é escrito na cor rosa e um pouco menor que o normal.
<samp>
Define texto como se fosse uma amostra de saída de um programa de computador.
Texto antes da tag Texto dentro da tag Texto Depois da tag.
No Chrome o texto dentro da tag <samp> é escrito com a fonte courier - monoespaçado.
<kbd>
Exibe o texto como se fosse uma entrada pelo teclado, uma tecla.
Texto antes da tag Texto dentro da tag Texto Depois da tag.
No Chrome o texto dentro da tag <kbd> é escrito com fundo preto e letras brancas, como teclas.
<var>
Define uma variável.
Texto antes da tag Texto dentro da tag Texto Depois da tag.
No Chrome o texto dentro da tag <var> é escrito em itálico.
12-<mark>
Define um texto marcado.
Exemplo de utilização:
Este texto esta antes da tag mark <mark> mas este aqui esta dentro</mark< e este aqui tá fora.
Como o browser exibe :
Este texto esta antes da tag mark mas este aqui esta dentro e este aqui tá fora.
No Chrome o texto foi exibido normalmente mas com um fundo rosa bem claro, quase imperceptível.
13-<q>
A tag <q> define uma cotação curta. Os navegadores normalmente inserem aspas ao redor da cotação.
Exemplo de utilização:
Este texto esta antes da tag q <q> mas este aqui esta dentro</q> e este aqui tá fora.
Como o browser exibe :
Este texto esta antes da tag q mas este aqui esta dentro e este aqui tá fora.
14-<s>
A tag <s> especifica o texto que não é mais correto, preciso ou relevante.
A tag <s> não deve ser usada para definir texto substituído ou excluído.
Use a tag <del> para definir texto substituído ou excluído.
Exemplo de utilização:
Este texto esta antes da tag s <s> mas este aqui esta dentro</s> e este aqui tá fora.
Como o browser exibe :
Este texto esta antes da tag s mas este aqui esta dentro e este aqui tá fora.
15-<samp>
Tag para formatação de texto - Ela define a saída de amostra de um programa de computador.
Texto antes da tag SAMP Texto dentro da tag samp Texto depois da tag samp.
Se quiser ver um resumo das tags que destacam texto Clique aqui
Exemplo de utilização:
Este texto esta antes da tag samp <samp> mas este aqui esta dentro</samp> e este aqui tá fora.
Como o browser exibe :
Este texto esta antes da tag samp mas este aqui esta dentro e este aqui tá fora.
No Chrome exibiu com a fonte courier monoespaçada.
16-<small>
Define que o texto em seu interior deve ser exibido menor que o corrente no documento atual.
Exemplo de utilização:
Este texto esta antes da tag small <small> mas este aqui esta dentro</small> e este aqui tá fora.
Como o browser exibe :
Este texto esta antes da tag small mas este aqui esta dentro e este aqui tá fora.
17-<span>
É uma das tags mais versateis do html pois permite definir uma região do documento sem afetar a disposição
dos elementos naturalmente feita pelo browser. Sua tag similar é a div que é exibida em bloco e por isso
altera o layout normal da página.
Muito útil para aplicar efeitos sem alterar o leioute natural do browser
Exemplo de utilização:
Este texto esta antes da tag span <span style="color:red;"> mas este texto esta dentro da tag span</span> e este texto esta depois da tag.
Como o browser exibe :
Este texto esta antes da tag span
mas este texto esta dentro da tag span e este texto esta depois da tag.
18-<strong>
Em muitos browsers esta tag é exatamente igual a tag b, ou seja, faz com que o texto que esteja
envolvido por esta tag ficar em negrito.
Se quiser ver um resumo das tags que destacam texto Clique aqui
Exemplo de utilização:
Este texto esta fora <strong>Mas este texto esta dentro da tag strong </strong> e este esta fora também.
Como o browser exibe :
Este texto esta fora
Mas este texto esta dentro da tag strong e este esta fora também.
19-<sub>
É uma da pouco utilizada pois desloca o texto em relação a linha e sua utilização se resume a
sites científicos ou matemáticos. Faz com que o texto dentro de sua tag fique subescrito.
Exemplo de utilização:
h<sub>2</sub>O é a fórumula da água.
Como o browser exibe :
h2O é a fórumula da água.
20-<sup>
É uma da pouco utilizada pois desloca o texto em relação a linha e sua utilização se resume a
sites científicos ou matemáticos. Faz com que o texto dentro de sua tag fique superscrito.
Exemplo de utilização:
x<sup>2</sup> - 2ab + 4 = 0.
Como o browser exibe :
x
2 - 2ab + 4 = 0.
21-<time>
Define que o campo em seu interior é um horario no formato que nós humanos conhecemos.
O elemento HTML time (<time>) representa o tempo tanto no formato de 24 horas ou como uma data precisa no calendário Gregoriano
(com informações opcionais de tempo e fuso horário)
Este elemento é destinado a apresentar datas e horas no dispositivo em um formato legível. Isto pode ser útil aos
agentes do usuário em oferecer qualquer programação de eventos ao calendário do utilizador.
Exemplo de utilização:
Nós abrimos às todos os dias.
<time datetime="2008-02-14 20:00">Dias dos Namorados - 14/02/2008</time>
Como o browser exibe :
Nós abrimos às todos os dias.
Não entendi para que esta tag serve.Parece que para formatar data e horario mas não entendi direito.
22-<u>
É uma das tags mais antigas dos browsers e faz com que o texto que esteja envolvido por esta tag ficar em
sublinhado.
Exemplo de utilização:
Este texto esta fora <i>Mas este texto esta dentro do sublinhado </i> e este esta fora também.
Como o browser exibe :
Este texto esta foraMas este texto esta dentro do sublinhado e este esta fora também.
23<var>
Tag para formatação de texto - Exibe o documento da forma variável ou alternativa, como
se fosse uma variável ou uma expressão matemática ou um contexto de programação.
Se quiser ver um resumo das tags que destacam texto Clique aqui
Importante : Não confundir a tag var do html com a palavra reservada var do JavaScript.
'Pires de Oliveira' não é o mesmo que 'Pratinho de azeitona'.
Exemplo de utilização:
Este texto esta fora da tag var <var>Mas este texto esta dentro do tag var </var> e este esta fora também.
Como o browser exibe :
Este texto esta fora da tag var Mas este texto esta dentro do tag var e este esta fora também.